<!--
 * @Description: 
 * @Author: Ronda
 * @Date: 2021-06-29 09:29:07
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-10-01 14:43:13
-->
<template>
  <div>
    <van-button color="#9370DB"
                block>收益</van-button>
    <van-tabs animated>
      <van-tab title="全部"
               v-model="form">
        <!-- 最外层 -->
        <div class="main"
             v-for="item in form"
             :key="item.id"
             v-show="item.status == '已完成'">
          <!-- 左边 -->
          <div class="left">
            <img class="photo"
                 :src="item.customer.userFace" />
          </div>
          <!-- 右边 -->
          <div class="right">
            <!-- 右边第一个盒子，分别展示用户名，订单状态 -->
            <div class="right_first">
              <div class="right_firstLeft">{{ item.customer.username }}</div>
              <div class="right_firstRight">{{ item.status }}</div>
            </div>
            <!-- 右边第二个盒子，展示订单地址 -->
            <div class="right_second">
              {{
                item.address.province +
                  item.address.city +
                  item.address.area +
                  item.address.address
              }}
            </div>
            <!-- 右边第三个盒子，分别展示订单时间和金额 -->
            <div class="right_third">
              <div class="time">{{ item.orderTime | time_change }}</div>
              <div class="mid_time"></div>
              <div class="cost_money">￥{{ item.total }}</div>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="提现"
               v-model="tableData">
        <!-- 最外层div -->
        <div class="tx_main"
             v-for="item1 in tableData"
             :key="item1.id">
          <!-- 盒子上方，用来展示提现到哪里和目前状态 -->
          <div class="up">
            <div class="up_left">{{ item1.applyType + "-到银行卡" }}</div>
            <div class="down_right"
                 :id="item1.status | setOrderStatus">
              {{ item1.status }}
            </div>
          </div>
          <!-- 盒子下方，用来展示提交时间和金额 -->
          <div class="down">
            <div class="down_left">{{ item1.applyTime | time_change }}</div>
            <div class="up_right">￥{{ item1.money }}</div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import moment from "moment";
import { getToken } from "@/utils/auth";
import { getId, findAll, findAccount } from "@/api/money";

import Vue from "vue";
import { Toast } from "vant";

Vue.use(Toast);
export default {
  data() {
    return {
      Token: "未登录",
      num: 1,
      form: {},
      tableData: {},
      params: {
        page: 1,
        pageSize: 100,
      },
    };
  },
  filters: {
    time_change: function (data) {
      return moment(data).format("YYYY-MM-DD hh:mm  a");
    },
    filters: {
      time_change: function (data) {
        return moment(data).format("YYYY-MM-DD hh:mm  a");
      },
      setOrderStatus: function (data) {
        switch (data) {
          case "不通过":
            return "not_past";
          case "通过":
            return "pass";
          case "未审核":
            return "not_reviewed";
        }
      },
    },
    computed: {},
    methods: {
      //拿到token值
      async bringToken() {
        this.Token = getToken();
        let res = await getId({
          token: this.Token,
        });
        let temp = { ...this.params };
        temp.employeeId = res.data.id;

        //分页查询所有订单
        let obj = await findAll(temp);
        this.form = obj.data.list;
        //查询该用户所有账单
        let temp1 = { ...this.params };
        temp1.userId = res.data.id;
        let res1 = await findAccount(temp1);
        this.tableData = res1.data.list;

        if (this.form) {
          Toast.clear();
        }
      },
      toLoading() {
        Toast.loading({
          message: "loading...",
          forbidClick: true,
          duration: 0,
        });
      },
    },

    created() {
      this.toLoading();
      this.bringToken();
    },
    mounted() { },
  }
}
</script>

<style scoped>
.main {
  display: flex;
  height: 120px;
  width: 90%;
  margin: 15px auto;
  border: 1px solid white;
  background-color: #ffffff;
  box-shadow: 0px 0px 10px #9966cc;
  border-radius: 5px;
}
.left {
  height: 120px;
  width: 120px;
}
.right {
  margin-left: 10px;
  height: 120px;
  width: 100%;
}
.photo {
  height: 80px;
  width: 80px;
  margin: 20px 0px 0px 10px;
  border-radius: 50%;
}

.right_first,
.right_third {
  display: flex;
  justify-content: space-between;
  margin-top: 13px;
  margin-right: 10px;
  font-size: 14px;
}
.right_second {
  color: #666;
  margin: 10px 0px;
  font-size: 16px;
}

/* 收益 */
.tx_main {
  height: 84px;
  width: 90%;
  margin: 15px auto;
  border: 1px solid white;
  background-color: #ffffff;
  box-shadow: 0px 0px 10px #9966cc;
  border-radius: 5px;
  background-color: #fff;
}
.up,
.down {
  display: flex;
  justify-content: space-between;
  height: 50%;
  font-size: 16px;
  margin: 10px;
}
#not_reviewed {
  font-size: 11px;
  color: #f8825d;
}
#pass {
  font-size: 11px;
  color: #0de66e;
}
#not_past {
  font-size: 11px;
  color: red;
}
</style>